<template>
  <div>
    <ul>
      <li class="ul_li" v-for="(item, index) in shuju" :key="index">
        <div class="monitor_li">
          <div class="monitor_img">
              <svg class="icon" aria-hidden="true">
              <use :xlink:href=" item['采集超时'] === 'true'
                    ? '#icon-zhihuiyongdianbaojing'
                    : '#icon-zhihuiyongdianzhengchang'"></use>
            </svg>
          </div>
          <div class="equipment">
            <div class="equipment_name">
              <span>{{ item.name }}</span>
              <span
                v-show="moreS"
                class="more_equipment"
                @click="moreInfo(item)"
              >
                <span>更多</span>
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-qianjin"></use>
                </svg>
              </span>
            </div>
            <p>
              <span>1路电压</span>
              <span>{{ item["1路电压"] }}V</span>
            </p>
            <p>
              <span>1路电流</span>
              <span>{{ item["1路电流"] }}A</span>
            </p>
            <p>
              <span>在线状态</span>
              <span
                class="equipment_state"
                :style="
                  item['采集超时'] === 'true'
                    ? 'background-color:#fe4d55'
                    : 'background-color:#43f55c'
                "
              >
              </span>
            </p>
          </div>
        </div>
      </li>
    </ul>
    <div class="drag">
      <van-dialog
        v-model="show"
        :title="info.name"
        :show-confirm-button="closeBotton"
        :show-cancel-button="closeBotton"
      >
        <p>
          <span>1路电压</span>
          <span>{{ info["1路电压"] }}V</span>
        </p>
        <p>
          <span>1路电流</span>
          <span>{{ info["1路电流"] }}A</span>
        </p>
        <p>
          <span>1路无功功率</span>
          <span>{{ info["1路无功功率"] }}W</span>
        </p>
        <p>
          <span>1路有功功率</span>
          <span>{{ info["1路有功功率"] }}W</span>
        </p>
        <p>
          <span>在线状态</span>
          <span
            class="equipment_state"
            :style="
              info['采集超时'] === 'true'
                ? 'background-color:#fe4d55'
                : 'background-color:#43f55c'
            "
          >
          </span>
        </p>
        <p>
          <span>1路视在功率</span>
          <span>{{ info["1路视在功率"] }}W</span>
        </p>
        <van-icon name="close" class="icon_close" @click="closeDrag" />
      </van-dialog>
    </div>
  </div>
</template>
<script>
import { Dialog } from "vant";
export default {
  props: ["shuju"],
  data: () => ({
    moreS: true,
    info: {},
    show: false,
    closeBotton: false,
  }),
  created() {},
  methods: {
    moreInfo(info) {
      this.show = !this.show;
      this.info = info;
    },
    closeDrag() {
      this.show = !this.show;
    },
  },
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
};
</script>
<style lang="less" scope>
.drag {
  .van-dialog {
    overflow: visible;
    padding-bottom: 3.867vw;
  }
  position: relative;
  .van-dialog__header {
    padding-top: 7.067vw;
    padding-bottom: 3.067vw;
    font-size: 4.267vw;
    color: #333333;
  }
  p {
    display: flex;
    padding-left: 6.267vw;
    padding-right: 6.533vw;
    line-height: 4vw;
    justify-content: space-between;
    // padding-right: 2.533vw;
    font-size: 3.733vw;
    box-sizing: border-box;
    color: #666666;
    margin-bottom: 2.667vw;
  }
  .equipment_state {
    display: inline-block;
    width: 1.867vw;
    height: 1.867vw;
    // background-color: #43f55c;
    border-radius: 50%;
  }
  .icon_close {
    font-size: 9.333vw;
    color: #ccc;
    position: absolute;
    bottom: -13.333vw;
    left: 50%;
    transform: translate(-50%, 100%);
  }
}
</style>
